<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="ptb10 plr30" @click="bindPublish">
				<view class="btn1">+新增发布</view>
			</view>
		</view>
		<view class="container">
			<view class="page-head flex-box">
				<view class="tab_item flex-grow-1" :class="query.status=='ing'?'active':''" @click="bindStatusChange('ing')">发布中</view>
				<view class="tab_item flex-grow-1" :class="query.status=='pause'?'active':''" @click="bindStatusChange('pause')">已暂停</view>
				<view class="tab_item flex-grow-1" :class="query.status=='auth'?'active':''" @click="bindStatusChange('auth')">审核状态</view>
			</view>
			<view class="pt88 plr30 pb30">
				<picker @change="bindCategoryChange" range-key="name" :range="taskCategories">
					<view class="picker_nav flex-box">
						<view class="flex-grow-1 fs28 pr30" :class="[!categoryName?'cola':'col3']">{{!categoryName?'选择零工类型；如：服务员':categoryName}}</view>
						<image src="https://admin.mosizp.cn/static/public/arrow-b2.png" mode="widthFix" class="ico17"></image>
					</view>
				</picker>
				
				<view class="pt10">
					<view class="item" v-for="(item,index) in jobs">
						<view class="flex-box lh50 fs36 col3">
							<view class="flex-grow-1 fwb pr30 m-ellipsis">{{item.name}}</view>
							<view class="col4 fs32 fwb">{{item.budget}}元/{{item.unit_text}}</view>
						</view>
						<view>
							<!-- <view class="label">日结</view> -->
							<view class="label">{{item.gender_text}}</view>
						</view>
						<view class="mt20 fs28 col3 lh40" ><text v-for="cate in item.category">{{cate.name}}</text></view>
						<view class="flex-box mt10">
							<view class="flex-grow-1 fs22 cola5 m-ellipsis pr30">{{item.work_address}}</view>
							<view class="cola5 fs24">报名: <text class="col8">{{item.enroll_num}}</text>人 | 浏览量: <text
									class="col8">{{item.view_num}}</text>人</view>
						</view>
						<view class="mid_link flex-box tc">
							<view class="flex-grow-1">
								<view class="fs32 col3 fwb lh46">{{item.work_start_time}}</view>
								<view class="cola5 fs22 lh30">上班时间</view>
							</view>
							<view class="tips">工作时间</view>
							<view class="flex-grow-1">
								<view class="fs32 col3 fwb lh46">{{item.work_end_time}}</view>
								<view class="cola5 fs22 lh30">下班时间</view>
							</view>
						</view>
						<view class="pt20 fs28 red1" v-if="item.audit_status=='failed'">审核拒绝：{{item.refuse_reason}}</view>
						<view class="btn_link flex-box">
							<view class="bt1" @click="bindDel(index)">删除</view>
							
							<view class="bt1 ml20" @click="bindStatus(index)" v-if="item.audit_status=='passed' && item.status=='normal'">暂停</view>
							<view class="bt1" @click="bindStatus(index)" v-else-if="item.audit_status=='passed'">上架</view>
							<view class="bt2" v-if="item.audit_status!='passed'" @click="bindEdit(index)">编辑</view>
							<view class="flex-grow-1"></view>
							<view class="bt3" v-if="item.audit_status == 'passed'" @click="bindEnroll(index)">查看报名人员</view>
						</view>
					</view>
					
					<view class="nothing" v-if="jobsMore.nothing">
						<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无零工</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" @click="fetch()">{{jobsMore.text}}</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				taskCategories: [],
				categoryName: '',
				query: {status:'ing',category_id: ''},
				jobs: [],
				jobsMore: {page: 1}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
			this.$util.getTastCategory(false).then(items => {
				items.unshift({id:'',name:'不限'})
				this.taskCategories = items;
			})
			this.refresh()
		},
		onReachBottom() {
			this.fetch();
		},
		methods: {
			bindStatusChange(status){
				this.query.status = status;
				this.refresh();
			},
			bindCategoryChange(event){
				let index = event.detail.value;
				this.categoryName = this.taskCategories[index].name;
				this.query.category_id = this.taskCategories[index].id;
				this.refresh();
			},
			refresh(){
				this.jobs = [];
				this.jobsMore = {page: 1};
				this.fetch()
			},
			fetch(){
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.task/my_task', query, 'jobsMore', 'jobs', 'data', data => {
					
				})
			},
			bindStatus(index){
				let page = this;
				let task = this.jobs[index];
				uni.showModal({
				  title: '提示',
				  content: '是否确认'+(task.status=='normal'?'暂停':'上架')+'零工？',
				  success: res => {
				    if (res.confirm) {
				      page.$core.post({
				        url: '/xilujob.task/multi_status/id/'+task.id,
				        success: ret => {
							page.refresh();
				        }
				      })
				    }
				  }
				});
			},
			bindDel(index){
				let page = this;
				let taskId = this.jobs[index].id;
				uni.showModal({
				  title: '提示',
				  content: '是否确认删除零工？',
				  success: res => {
				    if (res.confirm) {
				      page.$core.post({
				        url: '/xilujob.task/del/id/'+taskId,
				        success: ret => {
							page.jobs.splice(index,1);
				        }
				      })
				    }
				  }
				});
			},
			
			bindPublish() {
				uni.navigateTo({
					url: '/pages/public/publish_odd_job',
					events:{
						taskCreate: data=>{
							this.refresh();
						}
					}
				})
			},
			bindEdit(index) {
				let id = this.jobs[index].id;
				uni.navigateTo({
					url: '/pages/public/publish_odd_job?id='+id,
					events:{
						taskUpdate: data=>{
							this.jobs[index] = data.task;
							this.$forceUpdate();
						}
					},
				})
			},
			bindEnroll(index){
				let id = this.jobs[index].id;
				uni.navigateTo({
					url: '/pages/public/odd_job_applicants?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pt88 {
		padding-top: 88rpx;
	}

	.page-head {
		height: 88rpx;
		background: var(--primary);

		.tab_item {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;

			&.active {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				position: relative;

				&::after {
					content: '';
					width: 36rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.picker_nav {
		width: 690rpx;
		height: 85rpx;
		background: #FFFFFF;
		border-radius: 43rpx;
		margin-top: 30rpx;
		padding: 0 40rpx;
	}

	.item {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-top: 20rpx;
		padding: 30rpx;

		.label {
			display: inline-block;
			vertical-align: top;
			padding: 0 8rpx;
			height: 32rpx;
			background: #ECEFF5;
			border-radius: 4rpx;
			line-height: 32rpx;
			font-size: 22rpx;
			color: #A5A5A5;
			margin-right: 15rpx;
			margin-top: 15rpx;
		}
		.mid_link{
			width: 100%;
			height: 122rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			margin-top: 20rpx;
			.tips{
				font-size: 22rpx;
				color: var(--primary);
				width: 147rpx;
				height: 49rpx;
				line-height: 49rpx;
				text-align: center;
				background: #E1E9F5;
				border-radius: 28rpx;
			}
		}
		.btn_link{
			margin-top: 30rpx;
			padding-top: 30rpx;
			border-top: 1px solid #EEEEEE;
			.bt1{
				width: 108rpx;
				height: 52rpx;
				border-radius: 8rpx;
				border: 1px solid #696969;
				font-size: 24rpx;
				color: #787878;
				text-align: center;
				line-height: calc(52rpx - 2px);
			}
			.bt2{
				margin-left: 40rpx;
				width: 108rpx;
				height: 52rpx;
				border-radius: 8rpx;
				border: 1px solid var(--primary);
				line-height: calc(52rpx - 2px);
				text-align: center;
				font-size: 24rpx;
				color: var(--primary);
			}
			.bt3{
				width: 206rpx;
				height: 52rpx;
				border-radius: 8rpx;
				border: 1px solid var(--primary);
				line-height: calc(52rpx - 2px);
				text-align: center;
				font-size: 24rpx;
				color: var(--primary);
			}
		}
	}
	.btn1{
		height: 82rpx;
		line-height: 82rpx;
		font-size: 30rpx;
	}
</style>